.b_sub-brands-overview
{
	&::nth-of-type(even)
	{
		@media (min-width: 1440px)
		{
			.brand-image { order: 2; }
			.content-area { order: 1; }
		}
	}
}

.b_sub-brands-overview
{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 60px 20px;
	justify-content: center;
	align-items: center;
	gap: 60px;
	position: relative;

	h2, .h2
	{
		font-weight: 400;
		font-style: normal;
		color: var(--color-neutrals-white);
	}

	h5, .h5
	{
		font-weight: 400;
		font-style: normal;
		color: var(--color-neutrals-light-gray);
	}

	p, .p
	{
		font-family: var(--font-body-copy);
		font-size: 18px;
		font-weight: 500;
		font-style: normal;
		color: var(--color-neutrals-light-gray);
		line-height: 28px /* 156% */;
		letter-spacing: 0.02em;
	}

	.shared-heading
	{
		position: relative;
	}

	div.shared-heading > p
	{
		font-family: var(--font-headlines);
		font-style: normal;
		font-weight: 400;
	}

	.shared-set-cta-arrow
	{
		display: flex;
		align-items: center;

		.shape-slice-4-15-15-4
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Sub Brands Overview/images/shape.svg");
			border-image-slice: 4 15 15 4 fill;
			border-image-width: 4px 15px 15px 4px;
			border-image-repeat: stretch;
			min-width: 19px;
			min-height: 19px;
			position: absolute;
			width: calc(100% - -0.5px);
			height: calc(100% - 0.5px);
			left: 0;
			top: 0.25px;
			order: 0;
		}

		.content-5
		{
			display: flex;
			height: 50px;
			padding: 10px 22px 10px 30px;
			justify-content: center;
			align-items: center;
			gap: 2px;
			position: relative;
			flex: 0 0 auto;
			order: 1;
		}

		span.example-cta-5
		{
			position: relative;
			color: var(--color-neutrals-white);
			font-family: var(--font-body-copy);
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			order: 0;
		}

		.badge-icon-5
		{
			display: flex;
			flex-direction: column;
			height: 30px;
			justify-content: center;
			align-items: center;
			position: relative;
			flex: 0 0 30px;
			flex-shrink: 0;
			overflow: clip;
			order: 1;
		}

		.icon-arrow-right-5
		{
			width: 10px;
			position: relative;
			flex: 0 0 17px;
			flex-shrink: 0;
			overflow: clip;
			object-fit: contain;
			order: 0;
		}

		&:hover
		{
			filter: drop-shadow(0 4px 0 rgba(129, 129, 129, 1));
		}

		&:hover .shape-slice-4-15-15-4
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Sub Brands Overview/images/shape-4.svg");
			top: 0;
		}

		&:hover .example-cta-5
		{
			color: var(--color-neutrals-black);
		}

		&:hover .vector-9-6
		{
			display: none;
		}
	}

	.sub-brand
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 30px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
	}

	.brand-image
	{
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		object-fit: cover;
		aspect-ratio: 1 / 1;
	}

	&.image-right .brand-image
	{
		order: 1;
	}

	.content-area
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
	}

	.text
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
	}

	.headlines
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
	}

	.heading-area
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		flex: 0 0 auto;
		width: 100%;
	}

	h2.heading
	{
		flex: 1 0 0;
	}

	.brand-logo
	{
		height: 39px;
		position: relative;
		flex: 0 0 39px;
		object-fit: contain;
	}

	h5.sub-heading
	{
		width: 100%;
	}

	.body-copy
	{
		position: relative;
		width: 100%;
	}

	.cta-arrow
	{
		position: relative;
		flex: 0 0 auto;
	}

	@media (min-width: 1440px)
	{
		width: 100%;
		padding: 60px;

		.sub-brand
		{
			align-items: center;
			gap: 164px;
			flex-direction: initial;
			justify-content: initial;
		}

		.brand-image
		{
			height: 460px;
			flex: 0 0 460px;
			width: initial;
		}

		.content-area
		{
			flex: 1 1 0%;
			min-width: 0;
			width: initial;
		}

		.heading
		{
			flex: initial;
		}
	}
}